<template>
  <div>
    <h3>换肤 / 切换样式主题 方式2：</h3>
    <button @click="changeTheme2(1)">换肤为Moccasin</button>
    <button @click="changeTheme2(2)">换肤为#1E90FF</button>

    <button class="myButton2">我是一个可以换肤的按钮</button>
    <div id="darkMode">我是一个可以换肤的div</div>
  </div>
</template>

<script>
import {ref, reactive,computed } from "vue"
import {useRouter} from "vue-router"


export default {
    name: "home",
    components:{},
    data() {
        return {}
    },
    setup(){

      const textName= ref("浏览器插件安装说明");
      window.document.documentElement.setAttribute( "data-theme", 'light' );
      const dark= ref(false);
      const router =  useRouter();
      console.log("router",router.currentRoute.value.query)//获取路由参数 ？
      console.log("router",router.currentRoute.value.params)//获取路由参数 :/
      // 切换主题方式2：切换已定义好的css文件
      let changeTheme2 = (type) => {
        dark.value = !dark.value;
        if(dark.value){
          window.document.documentElement.setAttribute( "data-theme", 'dark' );
        }else{
          window.document.documentElement.setAttribute( "data-theme", 'light' );
        }
      };
      return{
        textName,
        changeTheme2
      }
    },
    created() {},
    mounted() {},
    methods: {},
    computed:{},
    watch:{},
    beforeDestroy() {},
    destroyed(){}
}
</script>

<style scoped lang="scss">
@import '@/assets/style/common.scss';
.link-btn{
  display: inline-block;
  position: relative;
  cursor: pointer;
  height: 40px;
  line-height: 40px;
  border: 1px solid rgb(85, 130, 243);
  padding: 0 8px;
  font-size: 12px;
  color: #fff;
  background-color: rgb(85, 130, 243);
  border-color: rgb(85, 130, 243);
  border-radius: 2px;
  margin: 20px;
}
#darkMode{
  //在此使用了背景颜色变量
  @include background_color("background_color");
  //再次使用了文字颜色变量
  @include font_color("text-color");
  width: 100vw;
  height: 100vh;
  .btn{
    width: 100px;
    height: 40px;
    margin:  0 auto;
  }
}
</style>